import Vue from 'vue'
import VueRouter from 'vue-router'
import store from '@/store'
// import Login from '@/views/Login'
// import Layout from '@/views/Layout'
// import Search from '@/views/Search'
// import SearchResult from '@/views/SearchResult'
// import ArticleDetail from '@/views/ArticleDetail'
// import UserEdit from '@/views/UserEdit'
// import Chat from '@/views/Chat'

// 二级页面
// import Home from '@/views/Home'
// import User from '@/views/User'

Vue.use(VueRouter)
// 路由懒加载
// 原因: 路由页面刚开始全都 import 引入,不管看不看那个页面,都引入过来打包
// 问题: 打包后的文件体积app.js过大 (这个项目 1MB 左右)
// 导致:  首页加载缓慢
// 解决: 路由懒加载
// 概念: 匹配路由后,再去import引入对应组件
// 语法: component: () => import(".vue文件路径")

const routes = [
  {
    path: '/',
    redirect: '/layout'
  },
  {
    path: '/login',
    component: () => import('@/views/Login')
  },
  {
    path: '/layout',
    component: () => import('@/views/Layout'),
    redirect: '/layout/home', // 配置二级路由的默认页
    children: [
      {
        path: 'home',
        component: () => import('@/views/Home')
      },
      {
        path: 'user',
        component: () => import('@/views/User')
      }
    ]
  },
  {
    path: '/search',
    component: () => import('@/views/Search')
  },
  {
    // 动态路由 - 跳转到这个路由规则是,必须在第二个路径传入其具体的值
    // keywords 是变量名
    path: '/search/:keywords',
    component: () => import('@/views/SearchResult')
  },
  {
    path: '/art_detail', // 问号传参不用写
    component: () => import('@/views/ArticleDetail')
  },
  {
    path: '/user/edit',
    component: () => import('@/views/UserEdit')
  },
  {
    path: '/chat',
    component: () => import('@/views/Chat')
  }
]

const router = new VueRouter({
  routes
})

// 需求1： 已经登陆了 不要在跳到登录页(如果想要重新登录，需要点击退出登录)

router.beforeEach((to, from, next) => {
  if (store.state.token.length > 0 && to.path === '/login') {
    // 有token 已经登录了
    next(false) // 阻止跳转
  } else {
    next()
  }
})
// 需求2: 涉及到用户操作的页面动作，需要登录(编辑自己的频道/点赞/。。。)

export default router
